<template>
  <div>
    <QrcodeSvg class="img" :value="qrContent" :options="qrOptions" />
  </div>
</template>

<script>
  // 由于预览是repl的沙河环境，直接使用默认导出QrcodeVue是渲染canvas，但是没法找到refs的dom元素，这里使用svg可以正常使用
  import { QrcodeSvg } from "qrcode.vue";
  export default {
    components: {
      QrcodeSvg,
    },
    data() {
      return {
        qrContent: window.location.href,
        qrOptions: {
          margin: 1, // 边距
          width: 200, // 宽度
          color: {
            dark: "#34495e", // 深色模块
            light: "#ffffff", // 浅色背景
          },
          ecLevel: "H", // 纠错级别 (L, M, Q, H)
        },
      };
    },
  };
</script>

<style scoped></style>
